<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      destroy-on-close
      draggable
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>合同文档</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <ContractBaseInfo />
      <ContractDocumentEdit ref="contractDocumentEditRef" @save-success="saveSuccess" />
      <template #footer>
        <div class="dialog-footer">
          <div class="operate-btns">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import ContractBaseInfo from "./ContractBaseInfo.vue";
import ContractDocumentEdit from "./ContractDocumentEdit.vue";
import useCommonFetch from "@/hooks/useCommonFetch";
import { ElMessage } from "element-plus";
const htDocumentTypeList = useCommonFetch("合同文档类型");
provide("htDocumentTypeList", htDocumentTypeList);
const dialogVisible = ref(false);
const contractDocumentEditRef = ref();
const operateId = ref(null);
const isAuditor = ref(false);
const taskId = ref("");
const checkStatus = ref("");
provide("id", operateId);
provide("isAuditor", isAuditor);
provide("taskId", taskId);
provide("checkStatus", checkStatus);
const edit = (id, isAudit, tId, checkState) => {
  operateId.value = id;
  isAuditor.value = isAudit;
  taskId.value = tId;
  checkStatus.value = checkState;
  dialogVisible.value = true;
  nextTick(() => {
    contractDocumentEditRef.value.edit(id);
  });
};
//保存
const save = () => {
  contractDocumentEditRef.value.save(-1);
};
defineExpose({ edit });
//信息保存成功事件
const saveSuccess = () => {
  ElMessage({
    message: "操作成功！",
    type: "success",
  });
  dialogVisible.value = false;
};
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
:deep(.el-tabs__header) {
  padding: 0 10px;
  margin-bottom: 0;
  background: #fff;
}
</style>
